function indexShow() {
    let mySid = []; //保存商品sid
    let myNum = []; //保存商品数量
    let myData = []; //保存全部商品信息
    //获取当前本地存储的商品信息数据
    function get_current_localStorage() {
        if (localStorage.getItem("goodsSid") && localStorage.getItem("goodsNum")) {
            mySid = localStorage.getItem("goodsSid").split(",");
            myNum = localStorage.getItem("goodsNum").split(",");
        }
    }

    //获取本地的用户信息并且渲染到页面
    function get_username() {
        if (localStorage.getItem("tel")) {
            $(".login_registry").css({ display: "none" });
            let str = "<span>退出</span>";
            $(".showName").html("尊敬的" + localStorage.getItem("tel") + str);
        }
    }
    //渲染的结构 要使用事件委托
    $(".showName").on("click", "span", function() {
        localStorage.removeItem("tel");
        $(".login_registry").css({ display: "inline" });
        $(".showName").html("");
    });
    get_username();

    //将商品信息数据存入当前本地存储
    function set_current_localStorage() {
        localStorage.setItem("goodsSid", mySid);
        localStorage.setItem("goodsNum", myNum);
    }
    //渲染购物车商品数目到页面(banner中的span)
    function showCartNum() {
        let sum = 0;
        for (let val of myNum) {
            sum += parseInt(val);
        }
        $(".showNum").html(sum);
        $(".showmyNum").html(sum);
    }

    get_current_localStorage();
    set_current_localStorage();
    get_username();
    showCartNum();
    //点击购物车跳转到我的购物车
    $(".goCart").on("click", function() {
        window.location.href = "http://10.31.157.19/myule/src/cartlist.html";
    });

    //同步搜索框和选择的li的内容
    $(".showSearch ul").on("mouseover", "li", function() {
        let currentInfo = $(this).find(".prespan").html();
        $(".search").val(currentInfo);
    });

    //设置li的图标
    function changgeBackground(obj, x, y) {
        obj.css({
            "background-image": "url(./img/sprite_category.png)",
            "background-position-x": x * 16,
            "background-position-y": y,
            "background-repeat": "no-repeat"
        });
    }

    //获取当前元素索引位置
    function getIndex(bigobj, smallobj) {
        let indexx = 0;
        $.each(bigobj, function(index, value) {
            if ($(value).get(0) === smallobj.get(0)) {
                indexx = index;
                return false;
            }
        });
        return indexx;
    }

    //渲染banner中li图标
    function render() {
        let size = $(".secondNav ul li").size();

        for (let i = 0; i < size; i++) {
            let curEle = $(".secondNav ul li").eq(i).find("i");
            if (arr[i] == 18) {
                changgeBackground(curEle, -(arr[i] - 1), -15);
            } else {
                changgeBackground(curEle, -(arr[i] - 1), 0);
            }
        }
    }

    let arr = [10, 4, 13, 12, 3, 9, 6, 1, 5, 8, 2, 18, 17]; //记录各个li图标的位置
    let currentIndex = null; //记录当前元素索引
    render(); //设置li的图标
    //鼠标移入banner二级导航
    $(".secondNav ul").on("mouseover", "li", function() {
        $(".SecondNavContent").css({
            display: "block"
        });
        let curThis = $(this);
        curThis.css({ "box-shadow": "0px 2px 3px 0 #ccc", background: "white" }).siblings("li").css({ "box-shadow": "0px 0px 0px 0 transparent", background: "transparent" });
        curThis.find("i").css({ transition: "all 1s", transform: "rotate(360deg)", "transform-origin": "50% 50%" });
        currentIndex = getIndex($(".secondNav ul li"), curThis);
        let curdiv = $(".SecondNavContent  .samediv").eq(currentIndex);
        curdiv.css({
            display: "block"
        }).siblings(" .samediv").css({
            display: "none"
        });
    });

    //鼠标移入banner二级导航内容
    $(".SecondNavContent").on("mouseover", ".samediv", function() {
        $(".SecondNavContent").css({
            display: "block"
        });
        $(this).css({
            display: "block"
        });
        currentIndex = getIndex($(".SecondNavContent .samediv"), $(this));
        let curli = $(".secondNav ul li").eq(currentIndex);
        curli.css({ "box-shadow": "0px 2px 3px 0 #ccc", background: "white" });
        curli.find("i").css({
            transition: "all 0s",
            transform: "rotate(0deg)"
        })
    });
    //鼠标移出banner二级导航内容
    $(".SecondNavContent").on("mouseout", ".samediv", function() {
        $(".SecondNavContent").css({
            display: "none"
        });
        $(this).css({
            display: "none"
        });
        currentIndex = getIndex($(".SecondNavContent .samediv"), $(this));
        $(".secondNav ul li").eq(currentIndex).css({ "box-shadow": "0px 0px 0px 0 transparent", background: "transparent" });
        $(".secondNav ul li").eq(currentIndex).find("i").css({ transition: "all 1s", transform: "rotate(360deg)", "transform-origin": "50% 50%" });
    });

    //鼠标移出banner二级导航
    $(".secondNav ul").on("mouseout", "li", function() {
        $(".SecondNavContent").css({ display: "none" });
        $(this).css({ "box-shadow": "0px 0px 0px 0 transparent", background: "transparent" });
        $(this).find("i").css({ transition: "all 1s", transform: "rotate(0deg)", "transform-origin": "50% 50%" });
    });

    //获取后台数据进行渲染
    let curIndex = 0; //当前渲染到第几条数据
    let str = ""; //放要渲染的结构 可重复利用
    $.ajax({
        url: "http://10.31.157.19/myule/php/indexdata.php",
        dataType: "json",
    }).done(function(data) {
        myData = data;
        for (curIndex; curIndex < data.length; curIndex++) {
            str += `
            <li sid=${data[curIndex].sid}>
                <a href='./detail.html?sid=${data[curIndex].sid}'>
                <img src=${data[curIndex].picurl}>
                <p>${data[curIndex].title}</p>
                <p>￥${data[curIndex].price}</p>
                </a>
            </li>
        `;
            // 渲染选项卡数据
            if (curIndex == 9) {
                $(".tabcontent ul").html(str);
                str = "";
            }
            //渲染各个商品板块信息
            if (curIndex == 7) {
                $(".partOne .goodsShow ul").html(str);

            }
            if (curIndex == 17) {
                $(".partTwo .goodsShow ul").html(str);
                str = "";
            }
            if (curIndex == 25) {
                $(".partThird .goodsShow ul").html(str);
                str = "";
            }
            if (curIndex == 33) {
                $(".partFour .goodsShow ul").html(str);
                str = "";
            }
            if (curIndex == 41) {
                $(".partFive .goodsShow ul").html(str);
                str = "";
            }
        }
        str = "";
        curIndex = data.length - 1;
    });

    // 渲染逛一逛 和 侧边导航中回到顶部功能
    // 当下拉到一定范围的时候侧边导航出现回到顶部
    // 当下拉到接近逛一逛部分的时候 渲染逛一逛
    // 渲染 搜索框
    // 当下拉到一定范围的时候 顶部弹出搜索框
    // $(window).on("scroll", function() {
    //     if (curIndex >= 0) { //渲染逛一逛若还有数据每次渲染十条数据
    //         if ((document.body.scrollHeight - $(this).scrollTop()) <= (4599 - 3595)) {
    //             let count = 0;
    //             for (curIndex; curIndex >= 0; curIndex--) {
    //                 if (curIndex < 0) {
    //                     break;
    //                 }
    //                 count++;
    //                 str += `
    //                 <li sid=${myData[curIndex]['sid']}>
    //                     <a href='./detail.html?sid=${myData[curIndex]['sid']}'>
    //                     <img src=${myData[curIndex].picurl}>
    //                     <p>${myData[curIndex].title}</p>
    //                     <p>￥${myData[curIndex].price}</p>
    //                     </a>
    //                 </li>
    //                 `;
    //                 if (count == 10) {
    //                     let content = $(".lastGooodsShow ul").html();
    //                     $(".lastGooodsShow ul").html(content + str);
    //                     str = "";
    //                     count = 0;
    //                     break;
    //                 }

    //             }

    //         }

    //     }
    //     if ($(this).scrollTop() > 1200) {
    //         $(".rightNav_Bottom").css({ display: "block" });
    //     } else {
    //         $(".rightNav_Bottom").css({ display: "none" });
    //     }
    //     if ($(this).scrollTop() < 900) {
    //         // 渲染 搜索框
    //         $("#banner .searchPart_top").removeClass("fixmenu");
    //         $("#content .bottomSearch").css({ display: "none" });

    //     } else if ($(this).scrollTop() > 900) {
    //         $("#banner .searchPart_top").addClass("fixmenu");
    //         $("#content .bottomSearch").css({ display: "block" });
    //     }

    // });

    //侧边导航回到顶部功能
    $(".rightNav_Bottom").on("click", function() {
        $(window).scrollTop(0);
    })

    //低价来袭部分 tab选项卡效果
    let timer = null;
    $(".tabchange span").on("mouseover", function() {
        let index = getIndex($(".tabchange span"), $(this));
        $(this).addClass("active_span").siblings("span").removeClass("active_span");
        console.log(index);
        //390 px是ul的可视高度
        $(".tabcontent ul").stop(true);
        $(".tabcontent ul").animate({
            top: -330 * index
        }, 400);
        //方法一 用stop(true)清空之前队列里的动画     只执行最后一次调用
        //方法二 利用定时器 （达不到要求）但是
        // if (timer) {
        //     clearTimeout(timer);
        //     // $(".tabcontent ul").stop(true);
        // }
        // timer = setTimeout(function() {
        //     $(".tabcontent ul").animate({
        //         top: -390 * index
        //     }, 60);
        // }, 0);
    });


    //楼梯导航 渲染逛一逛 渲染顶部弹出搜索框
    //都通过$(window).on('scroll', function(){})实现
    function controllerLTnav() {
        let myNav = $('#myLeftNav');
        let myNavli = $('#myLeftNav li').not('.last');
        let myContent = $('#content .goods');

        function showNav() {
            let top = $(window).scrollTop();
            if (top >= ($('.duihuan').offset().top - $('.duihuan').height())) {
                myNav.show();
            } else {
                myNav.hide();
            }
            myContent.each(function(index, element) {
                if ($(element).offset().top + $(element).height() / 3 >= top) {
                    myNavli.eq(index).addClass('active').siblings('li').removeClass('active');
                    return false;
                }
            });
        }
        showNav();
        // 渲染逛一逛 和 侧边导航中回到顶部功能
        // 当下拉到一定范围的时候侧边导航出现回到顶部
        // 当下拉到接近逛一逛部分的时候 渲染逛一逛
        // 渲染 搜索框
        // 当下拉到一定范围的时候 顶部弹出搜索框 楼梯导航
        $(window).on('scroll', function() {
            if (curIndex >= 0) { //渲染逛一逛若还有数据每次渲染十条数据
                if ((document.body.scrollHeight - $(this).scrollTop()) <= (4599 - 3595)) {
                    let count = 0;
                    for (curIndex; curIndex >= 0; curIndex--) {
                        if (curIndex < 0) {
                            break;
                        }
                        count++;
                        str += `
                        <li sid=${myData[curIndex]['sid']}>
                            <a href='./detail.html?sid=${myData[curIndex]['sid']}'>
                            <img src=${myData[curIndex].picurl}>
                            <p>${myData[curIndex].title}</p>
                            <p>￥${myData[curIndex].price}</p>
                            </a>
                        </li>
                        `;
                        if (count == 10) {
                            let content = $(".lastGooodsShow ul").html();
                            $(".lastGooodsShow ul").html(content + str);
                            str = "";
                            count = 0;
                            break;
                        }

                    }

                }

            }
            if ($(this).scrollTop() > 1200) {
                $(".rightNav_Bottom").css({ display: "block" });
            } else {
                $(".rightNav_Bottom").css({ display: "none" });
            }
            if ($(this).scrollTop() < 900) {
                // 渲染 搜索框
                $("#banner .searchPart_top").removeClass("fixmenu");
                $("#content .bottomSearch").css({ display: "none" });

            } else if ($(this).scrollTop() > 900) {
                $("#banner .searchPart_top").addClass("fixmenu");
                $("#content .bottomSearch").css({ display: "block" });
            }

            showNav();
            if ($(window).scrollTop() > ($(".partFive").offset().top + $(".partFive").height())) {
                myContent.each(function(index, element) {
                    myNavli.eq(index).removeClass('active');
                });
                $("#myLeftNav .last").addClass('active');
            }
        });

        myNavli.on('click', function() {
            $(window).off('scroll');
            let top = myContent.eq($(this).index('li')).offset().top - myContent.eq($(this).index('li')).height() / 3;
            $(this).addClass('active').siblings('li').removeClass('active');
            $('html').stop(true).animate({
                scrollTop: top
            }, function() {
                $(window).on('scroll', function() {
                    showNav();
                })
            })
        });


        $('#myLeftNav .last').on('click', function() {
            $(window).off('scroll');
            $('html').stop(true).animate({
                scrollTop: 0
            }, function() {
                $(window).on('scroll', function() {
                    showNav();
                });
            })
        });

    }
    controllerLTnav();



    //轮播图渲染
    window.onload = function() {
        var swiper = new Swiper('.swiper-container', {
            autoplay: 3000,
            speed: 1000,
            autoplayDisableOnInteraction: false,
            loop: true,
            centeredSlides: true,
            slidesPerView: 2,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            onInit: function(swiper) {
                swiper.slides[2].className = "swiper-slide swiper-slide-active"; //第一次打开不要动画
            },
            breakpoints: {
                668: {
                    slidesPerView: 1,
                }
            }
        });

    }

}
indexShow();